<template>
    <div class="input-prompt">{{ promptFromat }}</div>
</template>

<script>
export default  {
    name: 'InputPrompt',  // 组件名称
    props:['myMessage',"msgType"],
    data () {  // 数据
        return {
          msg: 'InputPrompt',
          fromatStr:""
        }
    },
    methods:{
        formatUserId(){ // 格式身份证

            if (this.myMessage.length < 14) {
                this.fromatStr = this.myMessage.replace(/(\d{6})/, "$1  ");
            } else {
                this.fromatStr = this.myMessage.replace(/(\d{6})(\d{8})/, "$1  $2  ");
            }
        },
        formatBandCard(){ // 格式银行卡
            if (this.myMessage.length > 4 && this.myMessage.length < 9) {
                this.fromatStr = this.myMessage.replace(/(\d{4})/, "$1  ");
            } else if (this.myMessage.length > 8 && this.myMessage.length < 13) {
                this.fromatStr = this.myMessage.replace(/(\d{4})(\d{4})/, "$1  $2  ");
            } else if (this.myMessage.length > 12 && this.myMessage.length < 17) {
                this.fromatStr = this.myMessage.replace(/(\d{4})(\d{4})(\d{4})/, "$1  $2  $3  ");
            } else if (this.myMessage.length > 16) {
                this.fromatStr = this.myMessage.replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1  $2  $3  $4 ");
            }
        },
        formatPhone(){ // 格式手机号
            if (this.myMessage.length > 3 && this.myMessage.length < 7) {
                this.fromatStr = this.myMessage.replace(/(\d{3})/, "$1  ");
            } else if (this.myMessage.length > 8) {
                this.fromatStr = this.myMessage.replace(/(\d{3})(\d{4})/, "$1  $2  ");
            }
        }

    },
    computed:{
        promptFromat:function  () {
            // 身份证正则表达式
            this.fromatStr = this.myMessage;
            if(this.msgType == "backCard"){
                this.formatBandCard()
            }else if(this.msgType == "sfz"){
                this.formatUserId();
            }else if(this.msgType == "phone"){
                this.formatPhone();
            }

            return this.fromatStr;
        }
    }
}
</script>

<style lang='scss' scoped>
.input-prompt{
    position: absolute;
    top: -50px;
    background: #dbd9d9;
    font-size: 20px;
    left: 70px;
}
</style>
